<template>
    <div class="head-bar-bottom" :style="{ marginLeft: sideBarItemWidth+'px'}">
        <div class="head_bar_bgc">
            <div class="content_right">
                <div class="head_top_main" v-if="roleFlag && ComCardList_3074">
                    <div class="head_btm_left">
                        <div class="title">
                            预留号码:
                            <div>
                                <!--<div class="fontcolor" >{{ isReserve==='1' ? "是" : "否" }}</div>-->
                                <!--<div v-if="isReserve===1" class="div_color">是</div>-->
                                <!--<div v-else class="fontcolor">否</div>-->
                                <div
                                    id="isReservevDiv"
                                    :class="{'fontcolor':isClassFontcolor,'div_color':isClassDivcColor}"
                                >{{ isReserve }}</div>
                            </div>
                        </div>
                        <div class="line_left"></div>
                        <div class="title">
                            查询密码验证:
                            <div v-if="sessionNotIsNull()">
                                <!--<div class="fontcolor" >{{ currentSessionObj.ivrData.data.AUTH==='1' ? "是" : "否" }}</div>-->
                                <div
                                    v-if="currentSessionObj.ivrData.data.AUTH ==='1'"
                                    class="div_color"
                                >是</div>
                                <div v-else class="fontcolor">否</div>
                            </div>
                            <div v-else>
                                <div class="fontcolor">否</div>
                            </div>
                        </div>
                        <div class="line_left"></div>
                        <div class="title">
                            交易密码验证:
                            <div v-if="sessionNotIsNull()">
                                <!--<div  class="fontcolor" >{{ currentSessionObj.ivrData.data.PEGTD==='1' ? "是" : "否" }}</div>-->
                                <div
                                    v-if="currentSessionObj.ivrData.data.PEGTD==='1'"
                                    class="div_color"
                                >是</div>
                                <div v-else class="fontcolor">否</div>
                            </div>
                            <div v-else>
                                <div class="fontcolor">否</div>
                            </div>
                        </div>
                    </div>
                    <div class="head_center" style="margin-left:30px;" v-if="isShowTitle">
                        <div class="title">
                            <b>客户姓名:</b>
                            <span
                                style="color: black; margin-left: 10px;"
                            >{{ customerInfo_3002.CHINAME}}({{isgender}})</span>
                        </div>
                    </div>
                    <div class="head_btm_right">
                        <router-link
                            v-if="currentRiskLevel===1"
                            class="title_left a_btn div_color"
                            active-class="active_title"
                            to
                        >
                            <span class="div_color">低风险验证通过</span>
                        </router-link>
                        <router-link
                            v-else-if="currentRiskLevel===2"
                            class="title_left a_btn div_color"
                            active-class="active_title"
                            to
                        >
                            <span class="div_color">中风险验证通过</span>
                        </router-link>
                        <router-link
                            v-else-if="currentRiskLevel===3"
                            class="title_left a_btn div_color"
                            active-class="active_title"
                            to
                        >
                            <span class="div_color">高风险验证通过</span>
                        </router-link>
                        <router-link
                            v-else-if="currentRiskLevel===4"
                            class="title_left a_btn div_color"
                            active-class="active_title"
                            to
                        >
                            <span class="div_color">加核项验证通过</span>
                        </router-link>
                        <!--<router-link v-else class="title_left a_btn" active-class="active_title" to>-->
                        <!--<span class="div_color_red">未通过任何身份验证</span>-->
                        <!--</router-link>-->
                    </div>
                </div>
                <div class="head_btm_rrt">
                    <el-button
                        type="text"
                        class="butSmell"
                        v-if="isShowBtn"
                        @click="handlecloseCustPage"
                    >关闭客户视图</el-button>
                    <el-button
                        type="text"
                        class="butSmell"
                        @click="showSumUp"
                        v-if="!isShowBtn && roleFlag"
                    >来电小结</el-button>
                </div>
            </div>
            <el-dialog
                v-drag
                :visible.sync="sumUpDialog"
                center
                :append-to-body="true"
                width="1000px"
                height="100%"
                custom-class="sumUpDialog"
                @close="sumUpClose"
                :close-on-click-modal="false"
            >
                <div slot="title" class="dialog_title">服务小结</div>
                <!-- <div class="dialog_body">
                    <Handover :handleclickClose="sumUpClose" />
                </div>-->
                <div class="infoContent">
                    <el-row class="infoItem">
                        <el-col :span="8">
                            <span class="title">客户姓名:</span>
                            <span class="content">{{ cardInfo_3004.NAME }}</span>
                        </el-col>
                        <el-col :span="8">
                            <span class="title">证件号码:</span>
                            <span class="content">{{ cardInfo_3004.CUSTID }}</span>
                        </el-col>
                        <el-col :span="8">
                            <span class="title">来电号码:</span>
                            <span class="content">{{getAnis | handleGetAnis(currentSessionObj)}}</span>
                        </el-col>
                    </el-row>
                    <el-row class="infoItem">
                        <el-tabs
                            type="card"
                            class="infoItem_tabs"
                            tab-position="left"
                            v-model="activeNameModel"
                        >
                            <el-tab-pane
                                v-for="val in activeName"
                                :label="val.operationName"
                                :name="val.operationId"
                                :key="val.operationId"
                            >
                                <el-row>
                                    <el-radio-group v-model="checkBoxList">
                                        <el-col
                                            :span="6"
                                            v-for="items in val.subList"
                                            :key="items.operationOrder"
                                        >
                                            <el-radio
                                                :label="items.operationId"
                                                :value="items.operationId"
                                                :name="items.operationName"
                                                ref="checkList"
                                                @change="handleCheckbox($event, val, items)"
                                            >{{ items.operationName }}</el-radio>
                                        </el-col>
                                    </el-radio-group>
                                </el-row>

                                <el-row class="fontTop">
                                    <div class="demo-input-suffix">
                                        备注:
                                        <el-input
                                            type="textarea"
                                            rows="2"
                                            placeholder="输入内容需在100字以内"
                                            v-model="remark"
                                            style="width: 85%"
                                            maxlength="100"
                                        ></el-input>
                                    </div>
                                    <div class="fontTop_bottom">
                                        <el-radio label="sm" v-model="summFlag" border>示忙</el-radio>
                                        <el-radio label="sx" v-model="summFlag" border>示闲</el-radio>
                                    </div>
                                </el-row>
                            </el-tab-pane>
                        </el-tabs>
                    </el-row>
                    <!-- <el-row class="infoItem">
                        <div class="InfocontTitle">来电详因</div>
                    </el-row>
                    <el-row class="infoItem">
                        <el-input
                            type="textarea"
                            placeholder="输入内容需在100字以内"
                            rows="5"
                            v-model="callDetail"
                            style="width: 60%"
                            maxlength="100"
                        ></el-input>
                    </el-row>-->
                    <!-- <el-row class="infoItem" style="line-height:60px;">
                         备注
                        <el-select
                            v-model="selectTemplate"
                            placeholder="请选择模板"
                            @change="selectChange"
                        >
                            <el-option
                                v-for="item in selectList"
                                :key="item.code"
                                :value="item.code"
                                :label="item.label"
                            ></el-option>
                        </el-select>
                    </el-row>-->
                </div>
                <div slot="footer">
                    <el-button type="primary" size="small" @click="sumUpClose()">关 闭</el-button>
                    <el-button v-if="isOpen" type="primary" size="small" @click="handleSave()">保 存</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { HEAD_MENU_WIDTH, HEAD_MENU_UNFOLD_WIDTH, PAPERS_TYPE } from 'utils/Contants';
// 页面一些常量
import { RegConfig } from '@/utils/RegConfig';
import { getDictSelectList, isEmpty } from '@/utils/Common';
import { isEmptyObject } from '@/utils/Object';
import { getToken, getTokenHsbankNo } from '@/utils/auth';

export default {
    name: 'navHead',
    data() {
        return {
            marginLeftSmell: `${HEAD_MENU_WIDTH}px`,
            marginLeftUfold: `${HEAD_MENU_UNFOLD_WIDTH}px`,
            formData: {
                offlinetablecardnbr: '',
                keytype: '01',
                offlinetablecustid: '',
                grantreason: '',
            },
            papersType: PAPERS_TYPE, // 证件类型下拉选
            isVip: '',
            rules: {
                offlinetablecardnbr: [
                    { pattern: RegConfig.cardNo, message: '银行卡号应由13-21位数字组成', trigger: 'blur' },
                ],
                grantreason: [
                    { required: true, message: '授权原因必填', trigger: 'blur' },
                ],
            },
            roleFlag: false, // 离线坐席
            sumUpDialog: false, // 来电小结对话框显示控制阀
            activeName: [], // 来电小结一级菜单
            checkBoxList: [], // 多选数据绑定
            callDetail: '', // 来电详因
            selectTemplate: '', // 模板数据绑定,
            // 备注，选择模板下拉,数据绑定
            selectList: [],
            remark: '', // 备注
            getAnis: '', // 来电号码
            submitData: [], // 提交数据
            activeNameModel: '',
            isOpen: false,
            summFlag: 'sx',
            isReserve: '否',
            riskLevel: '0',
            isClassFontcolor: true,
            isClassDivcColor: false,
        };
    },

    computed: {
        ...mapGetters([
            'sideBarCollapse',
            'cardList_3601',
            'cardInfo_3004',
            'customerInfo_3002', // 客户信息 3002
            'checkData',
            'SessionQueues',
            'currentSessionObj', // 电话件化
            'currentSessionId', // 软电话传过来的 SessionId
            'userIsVIP',
            'sideBarItemWidth',//侧边导航宽度
            'currentRiskLevel',//风险验证级别

        ]),
        isgender() {
            return ((this.customerInfo_3002.GENDER + '').trim() === 'M') ? '男' : '女'
        },
        isShowTitle() {
            return !isEmptyObject(this.customerInfo_3002);
        }
    },
    watch: {
        customerInfo_3002(newValue, oldValue) {
            // console.log("currentSessionObj=====", this.currentSessionObj);
            // console.log("customerInfo_3002======", this.customerInfo_3002);
            if (!isEmptyObject(newValue)) {
                let homephone6 = newValue.HOMEPHONE.trim();
                let mbphone11 = newValue.MOBILEPHONE.trim();
                console.log("home6:|" + homephone6 + "|,mbphone11:|" + mbphone11);
                if (homephone6 != '') {
                    homephone6 = homephone6.substring(homephone6.length - 6, homephone6.length);
                }
                if (mbphone11 != '') {
                    mbphone11 = mbphone11.substring(mbphone11.length - 11, mbphone11.length);
                }
                if (!(this.currentSessionObj.ani === '' || this.currentSessionObj.ani === undefined)) {
                    let anis = this.currentSessionObj.ani.trim();
                    console.log("anis:|" + anis + "|,mbphone11:|" + mbphone11);
                    if (anis.substring(anis.length - 6, anis.length) != homephone6 && anis.substring(anis.length - 11, anis.length) != mbphone11) {
                        this.isReserve = '否';
                        this.isClassFontcolor = true;
                        this.isClassDivcColor = false;
                        console.log("isReserve:|" + this.isReserve);
                    } else {
                        this.isReserve = '是';
                        this.isClassFontcolor = false;
                        this.isClassDivcColor = true;
                        console.log("isReserve:|" + this.isReserve);
                    }
                }
            }

        },
    },
    filters: {
        // 判断软电话数据是非为空
        handleGetAnis: (val, currentSessionObj) => {
            function isEmptyObject(target) {
                return Object.keys(target).length === 0;
            }
            if (isEmptyObject(currentSessionObj)) {
                return '无电话';
            }
            return currentSessionObj.ani;
        },
    },
    async created() {
        window.callSummaryObj = this.showSumUp;
        this.selectList = await getDictSelectList('TEMPLATE-TYPE-2', this);
    },
    mounted() {
        if (getToken() && JSON.parse(getToken()).roleType.indexOf('4') !== -1) { // 包含在线角色
            this.roleFlag = true;
        } else {
            this.roleFlag = false;
        }
        console.log('sideBarItemWidth菜单宽度', this.sideBarItemWidth);
    },

    methods: {
        getIsReserve() {
            if (this.customerInfo_3002.MOBILEPHONE === this.currentSessionObj.ani) {
                this.isReserve = '1';
            } else {
                this.isReserve = '0';
            }
        },
        handleChangevalue() {
            const dropdownDomn = this.$refs.dropdownDom.visible = false;
        },
        // 关闭客户视图，跳转到坐席首页
        handlecloseCustPage() {
            this.$confirm('是否确认要关闭客户视图', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.closeCustPage();
            }).catch(() => {
                this.$message({
                    typt: 'warning',
                    message: '已取消关闭',
                })
            })
        },
        closeCustPage() {
            // 桌坐席 完成后   清空state delAllVisitedViewsItem 
            // 关闭客户视图 不清除  currentSessionObj
            // if (isEmpty(top.softphone) || top.softphone.currAgentStatus !== '事后处理') {
            //     this.$store.dispatch('common/delStateAllagNew');
            // } else {
            this.$store.dispatch('common/delStateAllag');

            // }
            this.$store.commit('tagsView/DEL_ALL_VISITED_VIEWS_ITEM');
            this.$store.commit('tagsView/DEL_ALL_CACHED_VIEWS_ITEM');
            // menu 里的state 删除
            this.$store.commit('menu/DELECT_ALL_STATE_INITIAL');
            // this.$store.dispatch('tagsView/delAllVisitedViewsItem');
            this.$store.commit('tagsView/DELETE_CACHE_VIEWS', 'businessSystem');
            this.$router.push('/index/home');
            this.$store.commit('menu/UPDATE_ACTIVE_MENU', true);
            this.$store.commit('common/UPDATE_RISKLEVEL', 0);
            // 清空业务风险校验必核项内容
            this.$store.commit('common/RESET_CHECK_MUST_FORM');
            // //清空业务风险校验选核项内容
            this.$store.commit('common/RESET_CHECK_UNMUST_FORM');
            // 清理校验规则
            this.isReserve = '否';
        },
        // // 切换侧边栏的收缩展开状态
        toggleSidBar() {
            this.$store.commit('menu/TOGGLE_SIDE_BAR_COLLAPSE');
            // 记录侧边导航的宽度
            this.$store.commit('menu/SET_SIDE_BAR_WIDTH', this.sideBarWidth.replace('px', ''));
        },

        // 点击打开来电小结对话框
        showSumUp() {
            if (top.softphone.currAgentStatus === '事后处理') {
                this.isOpen = true;
            } else {
                this.isOpen = false;
            }
            console.log("top.softphone.uui==", top.softphone.uui);
            if (!isEmptyObject(top.softphone.uui)) {
                console.log("this.sumUpDialog==", this.sumUpDialog);
                this.sumUpDialog = true;
                console.log("this.sumUpDialog==", this.sumUpDialog);
                this.$post.callSummary.TbOperationType({ bankNum: getTokenHsbankNo('HsbankNo') })
                    .then((res) => {
                        // console.log("res:::::::::::::::::::::::",res);
                        if (res.data.success) {
                            this.activeName = res.data.content;
                            this.activeNameModel = this.activeName[0].operationId;
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    });
            } else {
                this.$alert(
                    '需在通话中或者通话结束后进行小结',
                    '提示',
                    {
                        customClass: 'warning', type: 'warning',
                    },
                );
            }
        },

        // 改变复选框
        handleCheckbox(e, val, items) {
            console.log('110——0话务小结选框的值——————', 'E:', e, 'val:', val, 'items:', items);
            if (e) { // 勾选复选框
                this.submitData = {
                    id: val.operationId,
                    operationName: val.operationName,
                    children: [{
                        id: items.operationId,
                        operationName: items.operationName,
                    }],
                };

                // this.submitData.forEach((item, index) => {
                //     if (item.id === val.operationId) {
                //         // 子类互斥
                //         // if (true) {
                //         //     item.children = []
                //         // }
                //         item.children.push({ // 当前保存数据已存在此父类id
                //             id: items.operationId,
                //             operationName: items.operationName,
                //         });
                //         flag = true;
                //     }
                // });

            }
            // } else { // 取消勾选复选框
            //     this.submitData.forEach((item) => {
            //         item.children = item.children.filter(value => value.id !== items.operationId);
            //     });
            //     this.submitData = this.submitData.filter(value => value.children.length !== 0);
            // }
            console.log(this.submitData, '提示提交数据this.submitData')
        },

        // 来电小结备注下拉
        selectChange() {
            this.selectList.forEach((item) => {
                if (this.selectTemplate === item.code) {
                    this.remark = item.label;
                }
            });
        },
        // 来电小结保存
        handleSave() {
            // if (this.currentSessionObj) {
            //     this.$alert(
            //         '需在通话过程中或者通话完成后进行小结保存',
            //         '提示',
            //         {
            //             customClass: 'warning', type: 'warning',
            //         },
            //     );
            //     return false;
            // }
            if (this.submitData.length <= 0) {
                this.$alert(
                    '至少选择一类进行话后小结',
                    '提示',
                    {
                        customClass: 'warning', type: 'warning',
                    },
                );
                return false;
            }
            let reasonType = '';// 大类ID
            let reasonTypeValue = '';// 大类name
            let reason = '';// 小类ID
            let reasonValue = '';// 小类name
            let anis = '';// 来电号码
            let dnis = '';// 呼叫号码
            let callId = '';// 录音Id
            // this.submitData.forEach((item) => { // 获取存在的大类以及小类ID+name
            //     reasonType += `${item.id},`;
            //     reasonTypeValue += `${item.operationName},`;
            //     item.children.forEach((childrenItem) => {
            //         reason += `${childrenItem.id},`;
            //         reasonValue += `${childrenItem.operationName},`;
            //     });
            // });
            // 获取存在的大类以及小类ID+name
            reasonType = this.submitData.id;
            reasonTypeValue = this.submitData.operationName;
            reason = this.submitData.children[0].id;
            reasonValue = this.submitData.children[0].operationName;

            // reasonType = reasonType.substring(0, reasonType.lastIndexOf(','));
            // reasonTypeValue = reasonTypeValue.substring(0, reasonTypeValue.lastIndexOf(','));
            // reason = reason.substring(0, reason.lastIndexOf(','));
            // reasonValue = reasonValue.substring(0, reasonValue.lastIndexOf(','));
            console.log(this.currentSessionObj, '软电话数据');
            // if (!isEmptyObject(this.currentSessionObj)) {
            anis = this.currentSessionObj.ani;
            dnis = this.currentSessionObj.dnis;
            callId = this.currentSessionObj.uniqueId;
            // }
            const parmes = {
                anis, // 来电号码
                bankNum: getTokenHsbankNo('HsbankNo'), // 银行号
                callCm: this.callDetail, // 来电原因
                callId: this.currentSessionId, // 录音Id
                cardNo: this.cardInfo_3004.CARDNO, // 卡号
                dnis, // 呼叫号码
                idNo: this.cardInfo_3004.CUSTID, // 身份证号
                idType: this.cardInfo_3004.KEYTYPE, // 身份证类型
                loginId: getToken() ? JSON.parse(getToken()).userAccount : '', // 登录坐席工号
                loginName: getToken() ? JSON.parse(getToken()).userName : '',
                memo: this.remark, // 备注
                reason, // 小类operationId
                reasonType, // 大类operationId
                reasonTypeValue, // 大类operationName
                reasonValue, // 小类operationName
                step: this.selectTemplate // 备注下拉 
            };
            console.log('110-__输出话后小结 信息', parmes);
            this.$post.callSummary.reasonAdd(parmes)
                .then((res) => {
                    // console.log(res,'保存')
                    if (res.status === 200) {
                        // this.$alert(
                        //     '保存成功',
                        //     '提示',
                        //     {
                        //         customClass: 'success', type: 'success',
                        //     },
                        // );
                        if (this.summFlag === 'sm') {
                            top.softphone.busyBtnClick();
                        } else if (this.summFlag === 'sx') {
                            top.softphone.IdleBtnClick();
                        }
                        this.sumUpClose();
                        // 数据保存成功  清除session  清除页面数据
                        if (top.softphone) {
                            console.log('检查清楚缓存的时间是什么时候——————————110');
                            top.softphone.clearAllSession();
                        }
                        // 桌坐席 完成后   清空state delAllVisitedViewsItem
                        this.closeCustPage();
                        // 清除
                        this.$store.dispatch('menu/delGlobalVariableNum2');
                        // 小结 完毕 清理 session 来电数据
                        this.$store.dispatch('common/delAllcurrentSessionId').then(() => {
                            console.log('_________________________session数据已经清理完成——————————————————');
                        });
                        // this.$store.dispatch('common/delStateAll');
                        // this.$store.dispatch('tagsView/delAllVisitedViewsItem');
                        // this.$store.commit('tagsView/DELETE_CACHE_VIEWS', 'businessSystem')
                        // this.$router.push('/index/home')
                        // this.$store.commit('menu/','');
                        // this.$store.commit('UPDATA_SESSION_OBJ_LIST',this.currentSessionObj)
                        // if(this.SessionObjList.length > 0){
                        //     // 删除 List 里的 SessionObj
                        // }else{
                        //     this.$router.push('/index/home')
                        // }
                        // delStateAll
                        // this.$destroy('businessSystem')
                    } else {
                        this.$alert(res.data.msg, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                });
        },
        // 弹框关闭
        sumUpClose() {
            if (top.softphone.currAgentStatus === '事后处理') {
                this.checkBoxList = [];
                this.submitData = [];
                this.callDetail = '';
                this.remark = '';
                this.summFlag = 'sx';
                // top.softphone.busyBtnClick();
            }
            this.sumUpDialog = false;

        },
        userIsVIP_filter() {
            if (this.userIsVIP) {
                return 'VIP用戶';
            }
            return '';
        },
        // 离线坐席 true
        isShowBtn() {
            const Sessionflag = this.currentSessionId.indexOf('LX');
            if (Sessionflag > -1) {
                return true;
            }
            return false;
        },
        // 监听侧边栏是打开还是关闭状态  sideBarCollapse false 打开
        sideBarWidth() {
            return this.sideBarCollapse ? this.marginLeftSmell : this.marginLeftUfold;
        },
        // 监听路由改变

        // 判断
        ComCardList_3074() {
            if (this.cardList_3601.length <= 0) {
                return true;
            }
            return false;
        },
        sessionNotIsNull() {
            console.log('top.softphone.sessionData', top.softphone.sessionData);
            if (typeof (top.softphone.sessionData) == 'object' && (top.softphone.sessionData.ivrData.data.AUTH || top.softphone.sessionData.ivrData.data.PEGTD)) {
                return true;
            } else {
                return false;
            }
            // try {
            //     console.log("top.softphone.sessionData===========================" + top.softphone.sessionData.ivrData.data.AUTH);
            // } catch (e) {
            //     return false;
            // }
            // return true;
        },
    },
};
</script>
<style lang="scss" >
.active_title {
    color: red;
}
.div_color {
    color: #38c61d;
}
.div_color_red {
    color: red;
}
.sumUpDialog {
    .el-dialog__body {
        padding: 10px 15px 15px 15px !important;
        .infoContent {
            color: #333;
        }
    }
    .el-checkbox {
        width: 14%;
        text-align: left;
        margin-bottom: 15px;
    }
    .infoContent {
        overflow: hidden;
        .infoItem {
            > div.InfocontTitle {
                padding: 5px 0 5px;
                /* margin-bottom: 10px; */
                font-size: 14px;
                font-weight: 600;
                color: #fff;
                text-align: center;
                border: 1px solid #4780fe;
                border-radius: 4px;
                background-color: #52aaff;
            }
            > .el-col {
                line-height: 30px;
            }
            .infoItem_tabs {
                margin-top: 15px;
                .el-tabs__content {
                    padding: 15px !important;
                    border: 1px solid #c7c9ce !important;
                    border-radius: 4px;
                    min-height: 460px;
                    .el-radio-group {
                        width: 100%;
                        .el-radio {
                            line-height: 46px;
                            .el-radio__input {
                                .el-radio__inner {
                                    border: 1px solid #8e8e8e;
                                }
                            }
                            .el-radio__label {
                                color: #333;
                                font-size: 14px;
                            }
                        }
                    }
                }
                .fontTop {
                    position: absolute;
                    width: 100%;
                    bottom: 15px;
                    .fontTop_bottom {
                        margin-top: 30px;
                        margin-left: 40px;
                    }
                }
                .el-tabs__header {
                    .el-tabs__nav-wrap {
                        .el-tabs__nav-prev,
                        .el-tabs__nav-next {
                            background-color: #52aaff;
                            padding: 0 2px;
                            border-radius: 3px;
                            i {
                                color: #fff;
                            }
                        }
                    }
                    .el-tabs__item {
                        color: #333;
                        height: 38px;
                        line-height: 38px;
                    }
                }
            }
            // text-align: center;
            .el-textarea__inner {
                font-size: 14px;
            }
            .title {
                display: inline-block;
                width: 100px;
                margin-right: 6px;
                font-size: 14px;
                font-weight: 800;
                text-align: right;
                color: #444;
            }
            .content {
                font-size: 14px;
                color: #000;
                font-weight: normal;
            }
            span {
                font-size: 12px;
            }
            .el-select {
                font-size: 12px;
                color: #333;
                font-weight: normal;
                margin: 0 10px;
            }
            /* 按钮样式 */
            .el-radio.is-bordered {
                line-height: 40px;
                padding: 0 20px;
            }
        }
    }
}
.dropdown_item_Card {
    left: 28% !important;
    .item_right {
        margin-top: 36px;
    }
    .popper__arrow {
        left: 48% !important;
    }
}
.head-bar-bottom {
    height: 46px;
    line-height: 46px;
    text-align: left;
    border-radius: 5px;

    .head_conter {
        margin-left: 25%;
    }
    .head_bar_bgc {
        border-top: 5px solid #f2f2f2;
        border-bottom: 5px solid #f2f2f2;
        background-color: #fff;
        /* margin-left: 10px; */
        line-height: 28px;
        height: 40px;
        div {
            display: inline-block;
        }
    }
    .head-left {
        // margin-right: 10px
        button {
            margin-left: 10px;
            padding: 0px 10px 5px 10px;
            border: none;
            background-color: transparent;
        }
        .el-icon-s-unfold {
            font-size: 30px;
            color: #000;
        }
    }
    .head-right {
        margin-left: 2%;
        span {
            font-size: 16px;
            font-weight: 700;
        }
        .title_top span {
            color: #333;
            font-weight: 600 !important;
        }
    }
    .content_right {
        /* float: right; */
        margin-left: 130px;
        width: 93%;
        .head_top_main {
            width: 75%;
            .head_btm_right {
                float: right;
            }
        }
        .head_btm_rrt {
            width: 20%;
            display: inline-flex;
        }
        .butSmell {
            border: 1px solid #409eff;
            font-size: 15px;
            font-weight: 600;
            padding: 6px;
            margin-left: 24px;
            float: right;
        }
        .a_btn {
            padding: 2px 5px;
            border: 1px solid #409eff;
            border-radius: 5px;
        }
        .title {
            margin-right: 8px;
        }
        .title_left {
            margin-right: 20px;
        }
        .title,
        .title_left {
            color: #4780fe;
            font-size: 14px;
            font-weight: 600;
            span {
                font-size: 14px;
            }
            .fontcolor {
                padding-left: 5px;
                color: red;
            }
        }
    }
}
</style>
